/* General styles for the modal */

/*
Styles for the html/body for special modal where we want 3d effects
Note that we need a container wrapping all content on the page for the
perspective effects (not including the modals and the overlay).
*/
@font-face {
font-family: 'Material Icons';
font-style: normal;
src: url(../fonts/MaterialIcons-Regular.eot); /* For IE6-8 */
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url(../fonts/MaterialIcons-Regular.woff2) format('woff2'),
url(../fonts/MaterialIcons-Regular.woff) format('woff'),
url(../fonts/MaterialIcons-Regular.ttf) format('truetype');
}
@font-face {
font-family: 'CircularStd';
font-style: normal;
src: local('Circular Std Book'), url('../fonts/CircularStd-Book.woff') format('woff');
}
@font-face {
font-family: 'CircularStd';
font-style: italic;
src: local('Circular Std Book Italic'), url('../fonts/CircularStd-BookItalic.woff') format('woff');
}
@font-face {
font-family: 'CircularStd';
font-style: normal;
src: local('Circular Std Medium'), url('../fonts/CircularStd-Medium.woff') format('woff');
}
@font-face {
font-family: 'CircularStd';
font-style: italic;
font-weight: 300;
src: local('Circular Std Medium Italic'), url('../fonts/CircularStd-MediumItalic.woff') format('woff');
}
/*@font-face {
font-family: 'CircularStd';
font-style: normal;
font-weight: 300;
src: local('Circular Std normal'), url('../fonts/CircularStd-Bold.woff') format('woff');
}
@font-face {
font-family: 'CircularStd';
font-style: italic;
font-weight: 300;
src: local('Circular Std Italic'), url('../fonts/CircularStd-BoldItalic.woff') format('woff');
}*/
/*@font-face {
font-family: 'CircularStd';
font-style: normal;
font-weight: 300;
src: local('Circular Std'), url('../fonts/CircularStd-Black.woff') format('woff');
}
@font-face {
font-family: 'CircularStd';
font-style: italic;
font-weight: 300;
src: local('Circular Std Italic'), url('../fonts/CircularStd-BlackItalic.woff') format('woff');
}*/
body{
    font-family: 'CircularStd', sans-serif !important;
    font-size: 12px !important;
    font-weight: normal !important;
}
.md-perspective,
.md-perspective body {
height: 100%;
overflow: hidden;
}

.md-perspective body  {
background: #222;
-webkit-perspective: 600px;
-moz-perspective: 600px;
perspective: 600px;
}


.md-modal {
position: fixed;
top: 50%;
left: 50%;
width: 50%;
max-width: 630px;
min-width: 300px;
height: auto;
z-index: 2000;
visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}

.md-show {
visibility: visible;
}
.card1-icon img{
width: 28px;
height: 28px;
}

.md-overlay {
position: fixed;
width: 100%;
height: 100%;
visibility: hidden;
top: 0;
left: 0;
z-index: 1000;
opacity: 0;
background: rgba(55, 58, 60, 0.65);
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}

.md-show ~ .md-overlay {
opacity: 1;
visibility: visible;
}

/* Content styles */
.md-content {
color: #666666;
background: #fff;
position: relative;
border-radius: 3px;
margin: 0 auto;
}

.md-content h3 {
color: #fff;
margin: 0;
padding: 0.4em;
text-align: center;
font-weight: 400;
opacity: 0.8;
background: #4680ff;
border-radius: 3px 3px 0 0;
}

.md-content > div {
padding: 15px 15px 30px 15px;
margin: 0;
font-weight: 300;
font-size: 1.15em;
}

.md-content > div p {
margin: 0;
padding: 10px 0;
}

.md-content > div ul {
margin: 0;
padding: 0 0 30px 20px;
}

.md-content > div ul li {
padding: 5px 0;
}

.md-content button {
display: block;
margin: 0 auto;
font-size: 0.8em;
}

/* Individual modal styles with animations/transitions */

/* Effect 1: Fade in and scale up */
.md-effect-1 .md-content {
-webkit-transform: scale(0.7);
-moz-transform: scale(0.7);
-ms-transform: scale(0.7);
transform: scale(0.7);
opacity: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}

.md-show.md-effect-1 .md-content {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}

/* Effect 2: Slide from the right */
.md-effect-2 .md-content {
-webkit-transform: translateX(20%);
-moz-transform: translateX(20%);
-ms-transform: translateX(20%);
transform: translateX(20%);
opacity: 0;
-webkit-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
-moz-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
}

.md-show.md-effect-2 .md-content {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}

/* Effect 3: Slide from the bottom */
.md-effect-3 .md-content {
-webkit-transform: translateY(20%);
-moz-transform: translateY(20%);
-ms-transform: translateY(20%);
transform: translateY(20%);
opacity: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}

.md-show.md-effect-3 .md-content {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}

/* Effect 4: Newspaper */
.md-effect-4 .md-content {
-webkit-transform: scale(0) rotate(720deg);
-moz-transform: scale(0) rotate(720deg);
-ms-transform: scale(0) rotate(720deg);
transform: scale(0) rotate(720deg);
opacity: 0;
}

.md-show.md-effect-4 ~ .md-overlay,
.md-effect-4 .md-content {
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
}

.md-show.md-effect-4 .md-content {
-webkit-transform: scale(1) rotate(0deg);
-moz-transform: scale(1) rotate(0deg);
-ms-transform: scale(1) rotate(0deg);
transform: scale(1) rotate(0deg);
opacity: 1;
}

/* Effect 5: fall */
.md-effect-5.md-modal {
-webkit-perspective: 1300px;
-moz-perspective: 1300px;
perspective: 1300px;
}

.md-effect-5 .md-content {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: translateZ(600px) rotateX(20deg);
-moz-transform: translateZ(600px) rotateX(20deg);
-ms-transform: translateZ(600px) rotateX(20deg);
transform: translateZ(600px) rotateX(20deg);
opacity: 0;
}

.md-show.md-effect-5 .md-content {
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
-webkit-transform: translateZ(0px) rotateX(0deg);
-moz-transform: translateZ(0px) rotateX(0deg);
-ms-transform: translateZ(0px) rotateX(0deg);
transform: translateZ(0px) rotateX(0deg);
opacity: 1;
}

/* Effect 6: side fall */
.md-effect-6.md-modal {
-webkit-perspective: 1300px;
-moz-perspective: 1300px;
perspective: 1300px;
}

.md-effect-6 .md-content {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: translate(30%) translateZ(600px) rotate(10deg);
-moz-transform: translate(30%) translateZ(600px) rotate(10deg);
-ms-transform: translate(30%) translateZ(600px) rotate(10deg);
transform: translate(30%) translateZ(600px) rotate(10deg);
opacity: 0;
}

.md-show.md-effect-6 .md-content {
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
-webkit-transform: translate(0%) translateZ(0) rotate(0deg);
-moz-transform: translate(0%) translateZ(0) rotate(0deg);
-ms-transform: translate(0%) translateZ(0) rotate(0deg);
transform: translate(0%) translateZ(0) rotate(0deg);
opacity: 1;
}

/* Effect 7:  slide and stick to top */
.md-effect-7{
top: 0;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}

.md-effect-7 .md-content {
-webkit-transform: translateY(-200%);
-moz-transform: translateY(-200%);
-ms-transform: translateY(-200%);
transform: translateY(-200%);
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
opacity: 0;
}

.md-show.md-effect-7 .md-content {
-webkit-transform: translateY(0%);
-moz-transform: translateY(0%);
-ms-transform: translateY(0%);
transform: translateY(0%);
border-radius: 0 0 3px 3px;
opacity: 1;
}

/* Effect 8: 3D flip horizontal */
.md-effect-8.md-modal {
-webkit-perspective: 1300px;
-moz-perspective: 1300px;
perspective: 1300px;
}

.md-effect-8 .md-content {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: rotateY(-70deg);
-moz-transform: rotateY(-70deg);
-ms-transform: rotateY(-70deg);
transform: rotateY(-70deg);
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
opacity: 0;
}

.md-show.md-effect-8 .md-content {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
opacity: 1;
}

/* Effect 9: 3D flip vertical */
.md-effect-9.md-modal {
-webkit-perspective: 1300px;
-moz-perspective: 1300px;
perspective: 1300px;
}

.md-effect-9 .md-content {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: rotateX(-70deg);
-moz-transform: rotateX(-70deg);
-ms-transform: rotateX(-70deg);
transform: rotateX(-70deg);
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
opacity: 0;
}

.md-show.md-effect-9 .md-content {
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
transform: rotateX(0deg);
opacity: 1;
}

/* Effect 10: 3D sign */
.md-effect-10.md-modal {
-webkit-perspective: 1300px;
-moz-perspective: 1300px;
perspective: 1300px;
}

.md-effect-10 .md-content {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: rotateX(-60deg);
-moz-transform: rotateX(-60deg);
-ms-transform: rotateX(-60deg);
transform: rotateX(-60deg);
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
transform-origin: 50% 0;
opacity: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}

.md-show.md-effect-10 .md-content {
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
transform: rotateX(0deg);
opacity: 1;
}

/* Effect 11: Super scaled */
.md-effect-11 .md-content {
-webkit-transform: scale(2);
-moz-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
opacity: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}

.md-show.md-effect-11 .md-content {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}

/* Effect 12:  Just me */
.md-effect-12 .md-content {
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8);
opacity: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}

.md-show.md-effect-12 ~ .md-overlay {
background: #fff;
}

.md-effect-12 .md-content h3,
.md-effect-12 .md-content {
background: transparent;
}

.md-show.md-effect-12 .md-content {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}

/* Effect 13: 3D slit */
.md-effect-13.md-modal {
-webkit-perspective: 1300px;
-moz-perspective: 1300px;
perspective: 1300px;
}

.md-effect-13 .md-content {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: translateZ(-3000px) rotateY(90deg);
-moz-transform: translateZ(-3000px) rotateY(90deg);
-ms-transform: translateZ(-3000px) rotateY(90deg);
transform: translateZ(-3000px) rotateY(90deg);
opacity: 0;
}

.md-show.md-effect-13 .md-content {
-webkit-animation: slit .7s forwards ease-out;
-moz-animation: slit .7s forwards ease-out;
animation: slit .7s forwards ease-out;
}

@-webkit-keyframes slit {
50% { -webkit-transform: translateZ(-250px) rotateY(89deg); opacity: .5; -webkit-animation-timing-function: ease-out;}
100% { -webkit-transform: translateZ(0) rotateY(0deg); opacity: 1; }
}

@-moz-keyframes slit {
50% { -moz-transform: translateZ(-250px) rotateY(89deg); opacity: .5; -moz-animation-timing-function: ease-out;}
100% { -moz-transform: translateZ(0) rotateY(0deg); opacity: 1; }
}

@keyframes slit {
50% { transform: translateZ(-250px) rotateY(89deg); opacity: 1; animation-timing-function: ease-in;}
100% { transform: translateZ(0) rotateY(0deg); opacity: 1; }
}

/* Effect 14:  3D Rotate from bottom */
.md-effect-14.md-modal {
-webkit-perspective: 1300px;
-moz-perspective: 1300px;
perspective: 1300px;
}

.md-effect-14 .md-content {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: translateY(100%) rotateX(90deg);
-moz-transform: translateY(100%) rotateX(90deg);
-ms-transform: translateY(100%) rotateX(90deg);
transform: translateY(100%) rotateX(90deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
transform-origin: 0 100%;
opacity: 0;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}

.md-show.md-effect-14 .md-content {
-webkit-transform: translateY(0%) rotateX(0deg);
-moz-transform: translateY(0%) rotateX(0deg);
-ms-transform: translateY(0%) rotateX(0deg);
transform: translateY(0%) rotateX(0deg);
opacity: 1;
}

/* Effect 15:  3D Rotate in from left */
.md-effect-15.md-modal {
-webkit-perspective: 1300px;
-moz-perspective: 1300px;
perspective: 1300px;
}

.md-effect-15 .md-content {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: translateZ(100px) translateX(-30%) rotateY(90deg);
-moz-transform: translateZ(100px) translateX(-30%) rotateY(90deg);
-ms-transform: translateZ(100px) translateX(-30%) rotateY(90deg);
transform: translateZ(100px) translateX(-30%) rotateY(90deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
transform-origin: 0 100%;
opacity: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}

.md-show.md-effect-15 .md-content {
-webkit-transform: translateZ(0px) translateX(0%) rotateY(0deg);
-moz-transform: translateZ(0px) translateX(0%) rotateY(0deg);
-ms-transform: translateZ(0px) translateX(0%) rotateY(0deg);
transform: translateZ(0px) translateX(0%) rotateY(0deg);
opacity: 1;
}

/* Effect 16:  Blur */
.md-show.md-effect-16 ~ .md-overlay {
background: rgba(180,46,32,0.5);
}

.md-show.md-effect-16 ~ .container {
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
filter: blur(3px);
}

.md-effect-16 .md-content {
-webkit-transform: translateY(-5%);
-moz-transform: translateY(-5%);
-ms-transform: translateY(-5%);
transform: translateY(-5%);
opacity: 0;
}

.md-show.md-effect-16 ~ .container,
.md-effect-16 .md-content {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}

.md-show.md-effect-16 .md-content {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}

/* Effect 17:  Slide in from bottom with perspective on container */
.md-show.md-effect-17 ~ .container {
height: 100%;
overflow: hidden;
-webkit-transition: -webkit-transform 0.3s;
-moz-transition: -moz-transform 0.3s;
transition: transform 0.3s;
}

.md-show.md-effect-17 ~ .container,
.md-show.md-effect-17 ~ .md-overlay  {
-webkit-transform: rotateX(-2deg);
-moz-transform: rotateX(-2deg);
-ms-transform: rotateX(-2deg);
transform: rotateX(-2deg);
-webkit-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}

.md-effect-17 .md-content {
opacity: 0;
-webkit-transform: translateY(200%);
-moz-transform: translateY(200%);
-ms-transform: translateY(200%);
transform: translateY(200%);
}

.md-show.md-effect-17 .md-content {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
opacity: 1;
-webkit-transition: all 0.3s 0.2s;
-moz-transition: all 0.3s 0.2s;
transition: all 0.3s 0.2s;
}

/* Effect 18:  Slide from right with perspective on container */
.md-show.md-effect-18 ~ .container {
height: 100%;
overflow: hidden;
}

.md-show.md-effect-18 ~ .md-overlay {
background: rgba(55, 58, 60, 0.5);
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
}

.md-show.md-effect-18 ~ .container,
.md-show.md-effect-18 ~ .md-overlay {
-webkit-transform-style: preserve-3d;
-webkit-transform-origin: 0% 50%;
-webkit-animation: rotateRightSideFirst 0.5s forwards ease-in;
-moz-transform-style: preserve-3d;
-moz-transform-origin: 0% 50%;
-moz-animation: rotateRightSideFirst 0.5s forwards ease-in;
transform-style: preserve-3d;
transform-origin: 0% 50%;
animation: rotateRightSideFirst 0.5s forwards ease-in;
}

@-webkit-keyframes rotateRightSideFirst {
50% { -webkit-transform: translateZ(-50px) rotateY(5deg); -webkit-animation-timing-function: ease-out; }
100% { -webkit-transform: translateZ(-200px); }
}

@-moz-keyframes rotateRightSideFirst {
50% { -moz-transform: translateZ(-50px) rotateY(5deg); -moz-animation-timing-function: ease-out; }
100% { -moz-transform: translateZ(-200px); }
}

@keyframes rotateRightSideFirst {
50% { transform: translateZ(-50px) rotateY(5deg); animation-timing-function: ease-out; }
100% { transform: translateZ(-200px); }
}

.md-effect-18 .md-content {
-webkit-transform: translateX(200%);
-moz-transform: translateX(200%);
-ms-transform: translateX(200%);
transform: translateX(200%);
opacity: 0;
}

.md-show.md-effect-18 .md-content {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
opacity: 1;
-webkit-transition: all 0.5s 0.1s;
-moz-transition: all 0.5s 0.1s;
transition: all 0.5s 0.1s;
}

/* Effect 19:  Slip in from the top with perspective on container */
.md-show.md-effect-19 ~ .container {
height: 100%;
overflow: hidden;
}

.md-show.md-effect-19 ~ .md-overlay {
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
}

.md-show.md-effect-19 ~ .container,
.md-show.md-effect-19 ~ .md-overlay {
-webkit-transform-style: preserve-3d;
-webkit-transform-origin: 50% 100%;
-webkit-animation: OpenTop 0.5s forwards ease-in;
-moz-transform-style: preserve-3d;
-moz-transform-origin: 50% 100%;
-moz-animation: OpenTop 0.5s forwards ease-in;
transform-style: preserve-3d;
transform-origin: 50% 100%;
animation: OpenTop 0.5s forwards ease-in;
}

@-webkit-keyframes OpenTop {
50% {
-webkit-transform: rotateX(10deg);
-webkit-animation-timing-function: ease-out;
}
}

@-moz-keyframes OpenTop {
50% {
-moz-transform: rotateX(10deg);
-moz-animation-timing-function: ease-out;
}
}

@keyframes OpenTop {
50% {
transform: rotateX(10deg);
animation-timing-function: ease-out;
}
}

.md-effect-19 .md-content {
-webkit-transform: translateY(-200%);
-moz-transform: translateY(-200%);
-ms-transform: translateY(-200%);
transform: translateY(-200%);
opacity: 0;
}

.md-show.md-effect-19 .md-content {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
opacity: 1;
-webkit-transition: all 0.5s 0.1s;
-moz-transition: all 0.5s 0.1s;
transition: all 0.5s 0.1s;
}

@media screen and (max-width: 32em) {
body { font-size: 75%; }
}
.more-info{
color: darkcyan;
font-size: 10px;
}


label.cabinet {
display: block;
cursor: pointer;
position: relative;
}

label.cabinet input.file {
width: 150px;
opacity:0;
margin-top: -10px !important;
-moz-opacity: 0;
position: absolute;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);

}

#upload-demo {
width: 150px;
height: 150px;
}
.gambar {
width: 150px !important;
height: 150px !important;
border-radius: 50%;
}
figure figcaption {
position: absolute;
top: 40px;
right:-40px;
color: #000;
width: 100%;
font-size: 12px;
padding-left:12px;
}


.input-file-container {
position: relative;
width: 255px;
} 
.input-file-trigger {
display: block;
padding: 10px 0px;
background:#fff;
color: #555;
font-size: 10px;
border: 2px dashed #ccc;
transition: all .4s;
cursor: pointer;
text-align: center;
}
.input-file {
position: absolute;
top: 0; left: 0;
width: 100%;
opacity: 0;
padding: 10px 0;
cursor: pointer;
}

#my_file {
position: absolute;
top: 0; left: 0;
width: 100%;
opacity: 0;
padding: 10px 0;
cursor: pointer;
}
.input-file:hover + .input-file-trigger,
.input-file:focus + .input-file-trigger,
.input-file-trigger:hover,
.input-file-trigger:focus {
background: #eee;
color: #000;
}

.file-return {
margin: 0;
}
.file-return:not(:empty) {
margin: 1em 0;
}
.file-return {
font-style: italic;
font-size: .9em;
font-weight: bold;
}
.file-return:not(:empty):before {
content: "Selected file: ";
font-style: normal;
font-weight: normal;
}
.login-wrapper .login-content .form-sociallink ul li a,
.login-wrapper .login-content .toggle-passwords,
.login-wrapper .login-content .toggle-password {
justify-content: center;
-webkit-justify-content: center;
-ms-flex-pack: center
}


.login-wrapper .login-content .form-sociallink ul li a,
.login-wrapper .login-content .form-sociallink ul,
.login-wrapper .login-content .toggle-passwords,
.login-wrapper .login-content .toggle-password{
align-items: center;
-webkit-box-align: center;
-ms-flex-align: center
}


.login-wrapper .login-content .form-sociallink ul,
.login-wrapper{
-ms-flex-wrap: wrap;
flex-wrap: wrap
}

.login-wrapper {
width: 100%;
overflow: hidden;
height: 100vh
}

.login-wrapper .login-content {
height: 100vh;
overflow: auto;
display:flex;
justify-content:center;
flex-wrap:wrap-reverse;
align-items: center;
background-image: url(../images/bg.jpg);
background-repeat:  no-repeat  center center;
background-size: cover;
}

@media(max-width:991px) {
.login-wrapper .login-content {
    height: 100vh;
    overflow: auto;
display:flex;
justify-content:center;
flex-wrap:wrap-reverse;
align-items: center;
background-image: url(../images/bg.jpg);
background-repeat:  no-repeat  center center;
background-size: cover;
}
}
@media(max-width:600px) {
 .login-content .card{
     width: 100%;
box-shadow: 0px 0px 0px 0px;
background: transparent !important;
}
.login-wrapper .login-content {
background-image: url(../images/bgm.jpg)!important;
background-repeat:  no-repeat  center center !important;
background-size: cover !important;
}
.login-wrapper .login-content {
min-height: 100vh;
overflow: auto;
display:flex;
justify-content:center;
flex-wrap:wrap;
align-items: center;
}
}

.login-wrapper .login-content .login-logo {
display: block;
margin-bottom: 5px;
max-width: 100% !important;
text-align: center !important;
}
.login-wrapper .login-content .login-logo .span{
width: 100%;
text-align: center;

}
.login-wrapper .login-content .login-logo .span img{
max-width: 60px;
text-align: center;
height: 60px;
border: dashed 1px #000;
border-radius: 50%;
}
.login-wrapper .login-content .login-logo .span i{
max-width: 70px;
text-align: center;
height: 70px;
border: dashed 1px #000;
border-radius: 50%;
}
.login-wrapper .login-content .login-userset {
width: 100% !important;
padding: 20px !important;
}

@media(max-width:991px) {
.login-wrapper .login-content .login-userset {
margin-top: 30px
}
}

.login-wrapper .login-content .login-userheading {
margin: 0 0 3px;
text-align: center;
}

.login-wrapper .login-content .login-userheading h3 {
font-size: 24px;
font-weight: 700;
margin: 0 0 15px;
color: #000
}

.login-wrapper .login-content .login-userheading h4 {
font-size: 14px;
font-weight: 400;
color: #212b36;
line-height: 1.4
}

.login-wrapper .login-content .form-login {
margin-bottom: 15px
}
.login-img{
height: 100vh;
}
.login-wrapper .login-img {
text-align: center;
    min-height: 100vh;
    max-height: 100vh;
background-image: url(../images/bg1.jpg);
background-repeat: no-repeat;
background-size: cover;
}
.login-wrapper .login-img h4 small{
font-size: 14px;
}
.login-wrapper .login-img h4{
font-size: 24px;
font-weight: bold;
}
@media(max-width:991px) {
.login-wrapper .login-img {
display: none
}
}

.login-wrapper .login-img img {
width: 110px;
height: 110px;
margin-top: 27%;
/*margin-left: 35%;*/
}

.login-wrapper .login-content .screen {		
background: linear-gradient(90deg, #117A65, #07B995);		
position: relative;	
height: 100vh;
width: 100%;	
/*box-shadow: 0px 0px 24px #10DEB4;*/
}

.screen__content {
z-index: 1;
position: relative;	
height: 100%;
}

.screen__background {		
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
-webkit-clip-path: inset(0 0 0 0);
clip-path: inset(0 0 0 0);	
}

.screen__background__shape {
transform: rotate(45deg);
position: absolute;
}

.screen__background__shape1 {
height: 520px;
width: 420px;
background: #FFF;	
top: -50px;
right: 120px;	
border-radius: 0 72px 0 0;
}

.screen__background__shape2 {
height: 220px;
width: 220px;
background: #07B995;	
top: -172px;
right: 0;	
border-radius: 32px;
}

.screen__background__shape3 {
height: 540px;
width: 190px;
background: linear-gradient(270deg, #117A65, #07B995);
top: -24px;
right: 0;	
border-radius: 32px;
}

.screen__background__shape4 {
height: 400px;
width: 200px;
background: #07B995;	
top: 420px;
right: 50px;	
border-radius: 60px;
}

.login {
width: 320px;
padding: 30px;
padding-top: 156px;
}

.login__field {
padding: 20px 0px;	
position: relative;	
}

.login__icon {
position: absolute;
top: 30px;
color: #10DEB4;
}

.login__input {
border: none;
border-bottom: 2px solid #D1D1D4;
background: none;
padding: 10px;
padding-left: 24px;
font-weight: 700;
width: 75%;
transition: .2s;
}

.login__input:active,
.login__input:focus,
.login__input:hover {
outline: none;
border-bottom-color: #6A679E;
}

.login__submit {
background: #fff;
font-size: 14px;
margin-top: 30px;
padding: 16px 20px;
border-radius: 26px;
border: 1px solid #D4D3E8;
text-transform: uppercase;
font-weight: 700;
display: flex;
align-items: center;
width: 100%;
color: #4C489D;
box-shadow: 0px 2px 2px #5C5696;
cursor: pointer;
transition: .2s;
}

.login__submit:active,
.login__submit:focus,
.login__submit:hover {
border-color: #6A679E;
outline: none;
}

.button__icon {
font-size: 24px;
margin-left: auto;
color: #7875B5;
}

.social-login {	
position: absolute;
height: 140px;
width: 160px;
text-align: center;
bottom: 0px;
right: 0px;
color: #fff;
}

.social-icons {
display: flex;
align-items: center;
justify-content: center;
}

.social-login__icon {
padding: 20px 10px;
color: #fff;
text-decoration: none;	
text-shadow: 0px 0px 8px #7875B5;
}

.social-login__icon:hover {
transform: scale(1.5);	
}

.login-content .card{
box-shadow: 0px 0px 0px 0px;
background: transparent;
}
#heading {
text-transform: uppercase;
color: #16A085;
text-align: center;
font-weight: normal
}

#msform {
text-align: center;
position: relative;
margin-top: 10px;
padding: 0px;
}

#msform fieldset {
border: 0 none;
width: 100%;
margin: 0;
padding: 10px;
position: relative
}

.form-card {
text-align: left
}

#msform fieldset:not(:first-of-type) {
display: none
}

#msform input,
#msform textarea,#msform select {
border:1px solid rgba(0,0,0,.12);
border-radius: 0px;
margin-bottom: 5px;
margin-top: 0px;
height:48px;
padding:10px 15px;
width:100%;
box-sizing: border-box;
font-family: inherit;
color: #2C3E50;
background:#fff;
font-size: 12px;
letter-spacing: 1px
}

#msform input:focus,
#msform textarea:focus {
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
border: 1px solid #76D7C4;
outline-width: 0
}

#msform .action-button {
width: 100px;
background: #58D68D;
font-weight: bold;
color: white;
border: 0 none;
border-radius: 0px;
cursor: pointer;
padding: 10px 5px;
margin: 10px 0px 10px 5px;
float: right
}

#msform .action-button:hover,
#msform .action-button:focus {
background-color: #7DCEA0 
}

#msform .action-button-previous {
width: 100px;
background: #616161;
font-weight: bold;
color: white;
border: 0 none;
border-radius: 0px;
cursor: pointer;
padding: 10px 5px;
margin: 10px 5px 10px 0px;
float: right
}

#msform .action-button-previous:hover,
#msform .action-button-previous:focus {
background-color: #000000
}

.card {
z-index: 0;
border: none;
position: relative
}

.fs-title {
font-size: 20px;
color: #16A085;
margin-bottom: 10px;
font-weight: normal;
text-align: left
}

.purple-text {
color: #7DCEA0;
font-weight: normal
}

.steps {
font-size: 20px;
color: gray;
margin-bottom: 10px;
font-weight: normal;
text-align: right
}

.fieldlabels {
color: #444;
text-align: left;
font-size: 12px;
}

#progressbar {
margin-bottom: 30px;
overflow: hidden;
color: lightgrey
}

#progressbar .active {
color: #7DCEA0
}

#progressbar li {
list-style-type: none;
font-size: 11px;
width: 25%;
float: left;
position: relative;
font-weight: 400
}

#progressbar #account:before {
font-family: FontAwesome;
content: "\f13e"
}

#progressbar #personal:before {
font-family: FontAwesome;
content: "\f007"
}

#progressbar #payment:before {
font-family: FontAwesome;
content: "\f030"
}

#progressbar #confirm:before {
font-family: FontAwesome;
content: "\f00c"
}

#progressbar li:before {
width: 30px;
height: 30px;
line-height: 25px;
display: block;
font-size: 15px;
color: #ffffff;
background: lightgray;
border-radius: 50%;
margin: 0 auto 5px auto;
padding: 2px
}

#progressbar li:after {
content: '';
width: 100%;
height: 2px;
background: lightgray;
position: absolute;
left: 0;
top: 15px;
z-index: -1
}

#progressbar li.active:before,
#progressbar li.active:after {
background: #76D7C4 
}

.progress {
height: 20px
}

.progress-bar {
background-color: #76D7C4 
}

.fit-image {
width: 100%;
object-fit: cover
}
.table tbody tr td .product-img img {
    min-width: 40px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}
.table tbody tr td  {
   padding: 4px !important;
}